<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>4-js 语句（循环、判断）</title>
  </head>
  <body>
    <h1>4-js 语句（循环、判断）</h1>
    <h2>循环</h2>
    <p>
      循环是编程中非常重要的概念，它可以让我们重复执行一段代码，直到满足某个条件为止。在
      JavaScript 中，循环有两种：for 循环和 while 循环。
    </p>
    <script>
      // for 循环
      for (let i = 0; i < 5; i++) {
        console.log(i);
      }
      /*
        for 循环的语法结构如下：
        for 循环可以重复执行某些相同代码
        for 循环可以重复执行一些不同的代码，因为我们有计数器
        for 循环可以重复执行某些操作，比如算术运算符加法操作
        随着需求增加，双重for循环可以做更多、更好看的效果
        双重 for 循环，外层循环一次，内层 for 循环全部执行
        for 循环是循环条件和数字直接相关的循环
      */

      // 断点调试的流程：
      // 1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
      // 2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
      // 3、按下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

      // while 循环
      let j = 0;
      while (j < 5) {
        console.log(j);
        j++;
      }
      /*
        while 循环的语法结构如下：
        while 循环可以重复执行某些相同代码，直到满足某个条件为止。
        while 循环可以重复执行一些不同的代码，因为我们有计数器
        while 循环可以重复执行某些操作，比如算术运算符加法操作
        和 for 循环一样，while 循环也是循环条件和数字直接相关的循环
      */

      // do-while循环
      let k = 0;
      do {
        console.log(k);
        k++;
      } while (k < 5);
      /*
        do-while 循环的语法结构如下：
        do-while 循环可以重复执行某些相同代码，直到满足某个条件为止。
        do-while 循环可以重复执行一些不同的代码，因为我们有计数器
        do-while 循环可以重复执行某些操作，比如算术运算符加法操作
        和 for 循环一样，do-while 循环也是循环条件和数字直接相关的循环
      */

      // 循环总结
      // for 循环和 while 循环可以实现相同的功能，但是 for 循环更常用。（不同点：for循环可以预先知道循环次数，而while循环需要一个条件判断。）

      // 2.0
      // 双重 for 循环
      console.log("小乘法表");
      var q = 0;
      for (let i = 1; i < 5; i++) {
        for (let j = 1; j <= i; j++) {
          var q = i * j;
          console.log(`${j} * ${i} = ${q}`);
        }
      }

      // 三元表达式
      let num = 10;
      let result = num > 5 ? "num 大于 5" : "num 小于等于 5";
      console.log("三元表达式", result);
    </script>
  </body>
</html>
